<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			html,
			body,#index {
				width: 100%;
				height: 100%;
				

			}
             #index{
				 background: url(./img/shou.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
			 }
			/* a {
				text-decoration: none;
			} */

			#header {
				width: 100%;
				height: 40px;
				background-color: #323232;
			}

			#header-conter,
			#boder-conver,
			#eading-con {
				width: 1116px;
				margin: 0 auto;
			}

			#header-conter {
				height: 40px;
				/* border: 1px solid red; */
				background-color: #323232;
			}

			.ulOne {
				display: block;
				list-style-type: none;
				width: 182px;
				height: 335px;
				float: left;
			}

			.ulOne .ulOne-lione {
				height: 116px;
				background-color: #dd4012;
			}

			.bgimglogo {
				margin-top: 30px;
				margin-left: 10px;
			}

			.ulOne .ulOne-lione h3 {
				color: #ffac94;
				margin-left: 14px;
				letter-spacing: 4px;
			}

			.ulOne a {
				color: aliceblue;
				display: block;
				text-decoration: none;
				width: 100%;
				height: 44px;
				line-height: 44px;
				font-size: 15px;
				background-color: #090a0d;
			}

			.ulOne a:hover {
				background-color: #dd4012;
			}

			.floatright {
				display: block;
				width: 50%;
				float: left;
				height: 42px;
				text-align: right;
				margin-right: 5px;
				color: #7b7b7b;
			}

			.floatleft {
				float: left;
				margin-left: 10px;
				color: #a6a6a6;
			}


			.ulTwo {
				display: block;
				list-style-type: none;
				width: 300px;
				height: 100%;
				/* border: 1px solid yellow; */
				float: right;
			}

			.ulTwo li {
				float: left;
				margin-left: 10px;
				margin-top: 10px;
			}

			#boder-conver {
				height: 760px;
				/* position: relative; */
			}

			#boder-conver a {
				display: block;
				width: 320px;
				height: 140px;
				background-color: #dd4012;
				text-decoration: none;
				position: absolute;
				top: 210px;
				left: 1180px;
			}

			#boder-conver a .a_p {
				color: aliceblue;
				display: block;
				width: 300px;
				height: 30px;
				margin: 10px auto;

			}

			.boder-conver_div {
				width: 300px;
				height: 66px;
				margin: 10px auto;
			}

			.boder-conver_div img {
				display: block;
				width: 110px;
				height: 66px;
				float: left;
			}

			.boder-conver_div .boder-conver_right {
				display: block;
				width: 170px;
				height: 66px;
				float: right;
			}

			.boder-conver_div .boder-conver_right h4 {
				color: #ffd1c4;
				font-size: 14px;
				margin-bottom: 10px;
			}

			.boder-conver_div .boder-conver_right h5 {
				color: #f77751;
				font-size: 10px;
				margin-bottom: 9px;
			}

			.boder-conver_div .boder-conver_right p {
				color: #ffa88f;
				font-size: 12px;
			}

			#displaynone {
				display: block;
				width: 20px;
				height: 20px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				top: 198px;
				left: 1486px;
			}

			#displaynone img {
				display: block;
				margin-left: 6px;
				margin-top: 6px;
			}

			#eading {
				width: 100%;
				height: 70px;
				background-color: black;
				position: absolute;
				bottom: 0px;
				opacity: 0.6;
			}

			#eading-con {
				height: 70px;
			}

			#eading-con ul {
				list-style-type: none;
				color: #666666;
			}

			#eading-con ul:first-child {
				float: left;
				font-size: 15px;
				margin-top: 25px;
			}

			#eading-con ul:first-child li {
				float: left;
				margin-left: 10px;
			}

			#eading-con ul:last-child {
				float: right;
				font-size: 15px;
				margin-top: 25px;
			}

			#eading-con ul:last-child li {
				float: left;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div id="index">


			<!-- 网页头部 -->
			<div id="header">
				<div id="header-conter">
					<ul class="ulOne">
						<li class="ulOne-lione">
							<img src="./img/bgloog.png" class="bgimglogo">
							<h3>网络全案营销服提供商</h3>
						</li>
						<li><a href="http://10.35.164.153/day4/index.html"><span class="floatright">HOME</span><span class="floatleft">网站首页</span> </a></li>
						<li><a href=""><span class="floatright">RESOURSE</span><span class="floatleft">传悦资源</span> </a></li>
						<li><a href="http://10.35.164.153/day4/anliList.html"><span class="floatright">CASES</span> <span class="floatleft">传悦案例</span></a></li>
						<li><a href="http://10.35.164.153/day4/jiejuList.html"><span class="floatright">SOLUTION</span><span class="floatleft">解决方案</span> </a></li>
						<li><a href=""><span class="floatright">SUBMIT</span><span class="floatleft">需求提高</span> </a></li>
					</ul>
					<ul class="ulTwo">
						<li><img src="./img/photo.png"><span style="color: #636363; margin-left: 10px; font-size: 17px;">0535-60652189</span></li>
						<li><a href=""><img src="./img/qq.png"></a></li>
						<li><a href=""><img src="./img/weibo.png"></a></li>
						<li><a href=""><img src="./img/weixin.png"></a></li>
						<li><a href=""><img src="img/Email.png"></a></li>
					</ul>
				</div>

			</div>
			<!-- 网页身体 -->
			<div id="boder">
				<div id="boder-conver">
					<a href="http://www.baidu.com">
						<p class="a_p"><span style="font-size: 20px;">传悦观点</span><span style="font-size: 15px; margin-left: 5px ; color: #f76940;">VIEWPCINT</span><span
							 style="display: block;float: right;margin-right:10px ;margin-top: 10px;"><img src="img/tiaozhaunjiantouright.png"></span></p>
						<div class="boder-conver_div">
							<img src="./img/loimg_03.jpg">
							<div class="boder-conver_right">
								<h4>传悦上线前的准备工作</h4>
								<h5>08-17</h5>
								<p>创梦科技网络有限责任公司······</p>
							</div>
						</div>
					</a>
					<div id="displaynone">
						<img src="img/none.png">
					</div>
				</div>
			</div>
			<!-- 网页尾部 -->
			<div id="eading">
				<div id="eading-con">
					<ul>
						<li>Copyright ©2013</li>
						<li>创梦网络科技有限责任公司</li>
						<li>‖</li>
						<li>传悦</li>
						<li>hnyoo.cn All Rights Reser</li>
					</ul>
					<ul>
						<li>关于传悦</li>
						<li>新闻动态</li>
						<li>传悦观点</li>
						<li>联系传悦</li>
						<li>加入传悦</li>
						<li>付款账户</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	let obtn = document.querySelector("#displaynone");
	let lis = document.querySelector("#boder-conver a");
	obtn.onclick = function() {
		obtn.style.display = "none";
		lis.style.display = "none";
	}
</script>
